<template>
  <div class="home">
    <div class="home-left">
      <post-message class="home-post-message" key="home-post-message"></post-message>
      <!-- 微博列表 -->
      <blog-list class="home-blog-list" :list="blogListData"></blog-list>
      <!-- 加载更多 -->
      <load-more v-if="isLoadMore" @click.native="getMoreBlog"></load-more>
    </div>
    <div class="home-right">
      <!-- 用户信息 -->
      <user-info :userData="userData"></user-info>
      <!-- 粉丝 -->
      <user-list :list="fansData.userList">粉丝({{ fansData.count }})</user-list>
      <!-- 关注 -->
      <user-list :list="followerData.userList">关注({{ followerData.count }})</user-list>
    </div>
  </div>
</template>
<script>
import PostMessage from 'components/common/PostMessage'
import BlogList from 'components/common/BlogList'
import LoadMore from 'components/common/LoadMore'
import userInfo from 'components/common/userInfo'
import userList from 'components/common/userList'

import { mapGetters } from 'vuex'

import {
  getHomeInfo,
  loadHomeMoreBlog
} from 'api/home'

export default {
  name: 'home',
  components: {
    PostMessage,
    BlogList,
    LoadMore,
    userInfo,
    userList
  },
  data () {
    return {
      id: 0,
      index: 0,
      blogData: {},
      blogListData: [],
      userData: {},
      fansData: {},
      followerData: {}
    }
  },
  computed: {
    ...mapGetters(['getSubmitBlog']),
    // 是否显示加载更多
    isLoadMore () {
      if (this.blogListData) {
        return this.blogData.count > this.blogListData.length
      }
      return false
    }
  },
  methods: {
    /**
     * 初始化首页数据
     * @methods init
     */
    async init () {
      let result = await getHomeInfo()
      // 是否是错误
      if (result.errno === 0) {
        let data = result.data
        // 博客信息
        this.blogData = data.blogData
        this.blogListData = data.blogData.blogs
        // 用户信息
        this.userData = data.userData
        // 粉丝信息
        this.fansData = data.fansData
        // 关注的人信息
        this.followerData = data.followerData
      } else {
        alert(result.message)
      }
    },
    /**
     * 获取后续的博客数据
     * @methods getMoreBlog
     */
    async getMoreBlog  () {
      this.index++
      // 获取后续
      let result = await loadHomeMoreBlog(this.index)
      // 是否获取到成功数据
      if (result.errno === 0) {
        this.blogListData.push(...result.data.blogs)
      } else {
        this.index--
        alert(result.message)
      }
    }

  },
  watch: {
    /**
     * 监听是否发布新blog
     */
    getSubmitBlog () {
      this.init()
    }
  },
  created () {
    this.init()
  }
}
</script>
<style lang="scss" scoped>
.home{
  display: flex;
  width: 70%;
  margin: 0 auto;
  .home-left{
    flex: 4;
    box-sizing: border-box;
    padding: 0 40px;
    .home-post-message{
      padding-bottom: 20px;
    }
    .home-blog-list{
      border-top: 1px solid #ccc;
      padding-top: 20px;
    }
  }
  .home-right{
    flex: 2;
  }
}
@media screen and (max-width: 600px) {
  .home{
    width: auto;
    padding: 0 10px;
    .home-left{
      padding: 0 10px;
    }
  }
}
</style>
